<template>
    <div class="ck">
      <div class="header">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; 机构管理</p></li>
        </ul>
      </div>

      <div class="state">
          <el-form>
              <el-col>
                  <el-input placeholder="请输入关键字" style="width:400px;" suffix-icon="el-icon-search" v-model="list.organizationName"></el-input>
                  <el-button style="margin-left:500px ;border:1px solid #0066ff;color:#0066ff;" @click="search">搜索</el-button>
                  <el-button style="margin-left:30px ;border:1px solid #0066ff;color:white;background-color: #2984F8;" @click="addArganizational">新增机构</el-button>
                  <el-button style="margin-left:30px ;border:1px solid #0066ff;color:#0066ff;" @click="Export">导出</el-button>
              </el-col>
          </el-form>
      </div>

      
        <el-table
              style="width: 1250px; margin-top:70px;"
              :header-cell-style="{ background: 'silver', color: '#606266' }"
              :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
              >
              <el-table-column
                  width="25"
              >
              </el-table-column>
              <el-table-column type="selection" width="75"></el-table-column>
              <el-table-column label="编号" width="100px" prop="organizationId"></el-table-column>
              <el-table-column label="机构图片" width="100px" prop="organizationImg">
                <template slot-scope="scope">
                  <img :src="scope.row.organizationImg" min-width="70" height="70" />
                </template>
              </el-table-column>
              <el-table-column label="机构名称" width="180px" prop="organizationName">
                 <template slot-scope="list">
                    <p v-html="list.row.organizationName"></p>
                 </template>
              </el-table-column>
              <el-table-column label="负责人姓名" width="100px" prop="principal"></el-table-column>
              <el-table-column label="电话" width="130px" prop="organizationPhone"></el-table-column>
              <el-table-column label="机构地址" width="240px" prop="organizationAddress"></el-table-column>
              <el-table-column label="状态" width="100px" prop="organizationState" :formatter="organizationState"></el-table-column>
               <el-table-column label="操作" width="200">
                 <template slot-scope="scope">
                    <el-button @click="updateRwo(scope.row.organizationId)" type="danger"
                   icon="el-icon-search" size="small"></el-button>
                    <el-button @click="deleteRow(scope.row.organizationId)" type="danger"
                   icon="el-icon-delete" size="small" circle></el-button>
                 </template>
               </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 4, 6, 8, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px;margin-left: 150px"
            :total="list.length">
        </el-pagination>
    </div>
</template>

<script>
import axios from "axios";
export default {
  data () {
    return {
      list : [],
      currentPage: 1,//初始页
      pagesize :2 ,//每页条数
    }
  },

  created () {
    this.findList()
  },

  methods: {
    findList(){
      axios({   
        url: "/api/organization/findEsList",
      }).then((res) => {
          console.log(res);
      this.list = res.data.data;
      });
    },
    organizationState(row, column, status, index){
          console.log(status);
         if (status === 1){
             return '启用';
         }else if (status === 2){
             return '禁用';
         }
      },
    handleSizeChange (size) {
        console.log(size,'size');
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    search(){
      axios({
        url:"/api/organization/findEsList",
        params:{
          organizationName:this.list.organizationName,
        }
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    deleteRow(id){
      alert(id)
    }

    
  },
  
   
}
</script>

<style>
.ck{
  width: 1250px;
  height: 1480px;
}
.header ul {
  width: 1250px;
  height: 50px;
  background-color: #f2f7fb;
  display: flex;
  padding-top: 20px;
  padding-left: 30px;
}
.header ul p {
  font-size: 22px;
  
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.state{
    margin-top:15px;
}
</style>